<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图练习</title>
		<!-- 引入vue的js文件 -->
		<script src="js/vue.js"></script>
		<style>
			#app{
				margin: auto;
				text-align: center;
			}
			img{
				width: 800px;
				height: 400px;
				border-radius: 18px;
				border: 0.0625rem solid gainsboro;
			}
			button{
				width:50px;
				height: 80px;
				background-color: black;
				opacity: 0.6;
				color: #FFFFFF;
				position: absolute;
				top:170px;
				outline: none;
				border: 0px;
			}
		</style>
		
	</head>
	<body>
		<!-- 课堂练习：
		模拟轮播图功能，要求页面上显示图片点击图片左侧，图片切换上一张
		点击图片右侧，图片切换下一张
		 -->
		<div id="app">
			<button @click="leftImg()" v-show="leftButton">&lt;</button>
			<img :src="imgSrc[index]"/>
			<button @click="rightImg()" v-show="rightButton" style="margin-left: -50px;">&gt;</button>			
		</div>	
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			imgSrc:[
				"img/bg1.jpg",
				"img/bg2.jpg",
				"img/bg3.jpg",
				"img/bg4.jpg",
				"img/bg5.jpg",
				"img/bg6.jpg",
				"img/bg7.jpg",
				"img/bg8.jpg",
				"img/bg9.jpg",
				"img/bg10.jpg",
				"img/bg11.jpg"
			],
			index:0,
			leftButton:false,
			rightButton:true
			
		},
		methods:{
			leftImg:function(){
				this.index--
				this.rightButton=true
				if(this.index==0){
					this.leftButton=false
				}
			},
			rightImg:function(){
				this.index++
				this.leftButton=true
				if(this.index==10){
					this.rightButton=false
				}
				
			}
			
		}
	})
	
	</script>
</html>
